<template>
	<view class="content">
		<div class="left">
			<el-button @click="dialogChange" type="primary">设置</el-button>
			<div class="table">
				<p class="title">封面图：</p>
				<el-image class="img" :src="form.banner" v-if="form.banner != ''"></el-image>
				<p class="title">个人信息：(展示效果)</p>
				<div class="img-con">
					<el-avatar class="imgTwo" :src="form.handImg"></el-avatar>
					<div class="head">{{form.name}}</div>
					<div class="phone"><span class="phoneTwo">QQ：</span>{{form.qq}}</div>
					<div class="phone"><span class="phoneTwo">weChart：</span>{{form.weChart}}</div>
				</div>
				<div class="gongGao">公告：{{form.title}}</div>
			</div>
		</div>
		<div class="right">
			<p>关于我</p>
			<tinymce v-model="form.aboutContent" :height="300" />
			<div class="btnCon">
				<el-button class="btn" @click="update" type="primary">保存</el-button>
			</div>
		</div>

		<el-dialog title="设置" :visible.sync="dialogVisible" width="50%">
			<ul>
				<li>
					<text class="title">名称：</text>
					<el-input v-model="form.name"></el-input>
				</li>
				<li>
					<text class="title">QQ：</text>
					<el-input v-model="form.qq"></el-input>
				</li>
				<li>
					<text class="title">微信：</text>
					<el-input v-model="form.weChart"></el-input>
				</li>
				<li>
					<text class="title">封面图片：</text>
					<el-image class="img" :src="form.banner" v-if="form.banner != ''"></el-image>
					<el-button v-if="form.banner == ''" type="primary" plain @click="upload('banner')">上传封面</el-button>
					<el-button class="btn" v-if="form.banner != ''" type="danger" plain @click="uploadRemove('banner')">
						删除图片
					</el-button>
				</li>
				<el-divider></el-divider>
				<li>
					<text class="title">头像：</text>
					<el-image class="img" :src="form.handImg" v-if="form.handImg != ''"></el-image>
					<el-button v-if="form.handImg == ''" type="primary" plain @click="upload('handImg')">上传头像
					</el-button>
					<el-button class="btn" v-if="form.handImg != ''" type="danger" plain
						@click="uploadRemove('handImg')">
						删除图片</el-button>
				</li>
				<li>
					<text class="title">公告：</text>
					<el-input v-model="form.title"></el-input>
				</li>
			</ul>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="update">保 存</el-button>
			</span>
		</el-dialog>
	</view>

</template>

<script>
	import Tinymce from "../../../../components/Tinymce"
	export default {
		components: {
			Tinymce
		},
		data() {
			return {
				form: {
					aboutContent: ''
				},
				banner: "",
				handImg: "",
				dialogVisible: false,
				name: "",
				qq: "",
				weChart: ""
			};
		},
		created() {
			this.get()
		},
		methods: {
			// 获取数据
			async get() {
				return await uniCloud.callFunction({
					name: 'query',
					data: {
						tableName: "blogs-user",
						id: "60b4a0788a69dc0001abd70c"
					}
				}).then((res) => {
					this.form = res.result.data[0]
					return res.result.data
				}).catch((err) => {
					uni.showModal({
						content: `查询失败，错误信息为：${err.message}`,
						showCancel: false
					})
					console.error(err)
				})
			},
			// 修改数据
			async update() {
				uni.showLoading({
					title: '处理中...'
				})
				return await uniCloud.callFunction({
					name: 'update',
					data: {
						tableName: 'blogs-user',
						id: '60b4a0788a69dc0001abd70c',
						banner: this.form.banner,
						handImg: this.form.handImg,
						name: this.form.name,
						qq: this.form.qq,
						weChart: this.form.weChart,
						title: this.form.title,
						aboutContent: this.form.aboutContent
					}
				}).then((res) => {
					uni.hideLoading()
					this.$notify({
						title: '提示',
						message: '修改成功',
						type: 'success'
					});
					this.dialogVisible = false
					return res.result.msg
				}).catch((err) => {
					uni.hideLoading()
					uni.showModal({
						content: `更新操作执行失败，错误信息为：${err.message}`,
						showCancel: false
					})
					console.error(err)
				})
			},
			// async add() {
			// 	return await uniCloud.callFunction({
			// 		name: 'add',
			// 		data: {
			// 			action: 'blogs-user',
			// 			banner: this.banner,
			// 			handImg: this.handImg
			// 		}
			// 	}).then((res) => {
			// 		uni.hideLoading()
			// 		this.$notify({
			// 			title: '提示',
			// 			message: '添加成功',
			// 			type: 'success'
			// 		});
			// 		this.dialogVisible = false
			// 		return res.result.id
			// 	}).catch((err) => {
			// 		uni.hideLoading()
			// 		uni.showModal({
			// 			content: `添加数据失败，错误信息为：${err.message}`,
			// 			showCancel: false
			// 		})
			// 		console.error(err)
			// 	})
			// },
			dialogChange() {
				this.dialogVisible = true
			},
			// 上传图片
			upload(type) {
				var that = this
				new Promise((resolve, reject) => {
					uni.chooseImage({
						count: 1,
						success: res => {
							const path = res.tempFilePaths[0]
							let ext
							// #ifdef H5
							ext = res.tempFiles[0].name.split('.').pop()
							const options = {
								filePath: path,
								cloudPath: Date.now() + '.' + ext
							}
							resolve(options)
							// #endif
							// #ifndef H5
							uni.getImageInfo({
								src: path,
								success(info) {
									const options = {
										filePath: path,
										cloudPath: Date.now() + '.' + info.type
											.toLowerCase()
									}
									resolve(options)
								},
								fail(err) {
									reject(new Error(err.errMsg || '未能获取图片类型'))
								}
							})
							// #endif
						},
						fail: () => {
							reject(new Error('Fail_Cancel'))
						}
					})
				}).then((options) => {
					uni.showLoading({
						title: '文件上传中...'
					})
					return uniCloud.uploadFile({
						...options,
						onUploadProgress(e) {
							console.log(e)
						}
					})
				}).then(res => {
					uni.hideLoading()
					// console.log(res);
					if (type == 'banner') {
						that.form.banner = res.fileID
					} else if (type == 'handImg') {
						that.handImg = res.fileID
					}
					that.$notify({
						title: '提示',
						message: '上传成功',
						type: 'success'
					});
				}).catch((err) => {
					uni.hideLoading()
					console.log(err);
					if (err.message !== 'Fail_Cancel') {
						uni.showModal({
							content: `图片上传失败，错误信息为：${err.message}`,
							showCancel: false
						})
					}
				})
			},
			// 删除图片
			async uploadRemove(type) {
				var that = this
				let arr = ""
				if (type == 'banner') {
					arr = that.banner
				} else if (type == 'handImg') {
					arr = that.handImg
				}
				arr = arr.split(',')
				return await uniCloud.callFunction({
					name: 'removeImage',
					data: {
						imgUrl: arr
					}
				}).then(res => {
					console.log(res, '333')
					that.$notify({
						title: '提示',
						message: '删除成功',
						type: 'success'
					});
					if (type == 'banner') {
						that.form.banner = ""
					} else if (type == 'handImg') {
						that.handImg = ""
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	ul,
	li {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.content {
		padding: 20upx;
		height: 1600upx;
		display: flex;

		ul {
			li {
				margin-bottom: 60upx;

				.img {
					max-width: 400upx;
					max-height: 200upx;
					display: block;
				}

				.title {
					display: block;
					margin-bottom: 20upx;
				}

				.btn {
					margin-top: 20upx;
				}
			}
		}

		.left {
			width: 50%;
			height: 100%;



			.table {
				margin-top: 20upx;

				.gongGao {
					width: 600upx;
					height: 200upx;
					background-color: #f4f4f4;
					float: left;
					margin-left: 40upx;
					padding: 20upx;
				}

				.title {
					margin: 20upx 0;
				}

				.img {
					max-width: 400upx;
					max-height: 200upx;
					display: block;
				}

				.img-con {
					width: 600upx;
					height: 800upx;
					background-color: #f4f4f4;
					padding: 20upx 0;
					float: left;

					.imgTwo {
						width: 200upx;
						height: 200upx;
						display: block;
						margin: 0 auto;
					}

					.head {
						font-size: 32upx;
						text-align: center;
						margin-top: 20upx;
						font-weight: bold;
					}

					.phone {
						text-align: center;
						margin-top: 20upx;

						.phoneTwo {
							color: #ee82ee;
						}
					}

				}
			}
		}

		.right {
			width: 50%;

			.btnCon {
				width: 100%;
				text-align: center;

				.btn {
					margin-top: 20upx;
				}
			}

			p {
				width: 100%;
				text-align: center;
				margin: 20upx 0;
			}
		}
	}
</style>
